<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="cdn/vue-3.2.26.js"></script>
    <script src="cdn/element-ui.js"></script>
    <link rel="stylesheet" href="cdn/element-plus.css">
    <script src="./cdn/axios-0.24.0.js"></script>
    <script src="js/request.js"></script>
    <script src="js/objectToFormData.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
    <div id="app">
            <div class="login-container">
                <div class="form-container">
                  <div class="form-header">
                    欢迎注册
                  </div>
                  <el-form ref="registerFormRef"
                           :model="registerForm"
                           :rules="registerRules"
                           label-width="100px"
                           class="demo-ruleForm"
                           :size="formSize">
                    <el-form-item label="用户名"
                                  prop="UserName">
                      <el-input v-model="registerForm.UserName"
                                placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="账号"
                                  prop="Account">
                      <el-input v-model="registerForm.Account"
                                placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码"
                                  prop="Password">
                      <el-input v-model="registerForm.Password"
                                type="password"
                                show-password
                                placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <span>已有账号?<a href='./login.html'
                                     id="register-link">去登录</a></span>
                      <el-button type="primary"
                                 class="login-btn"
                                 @click="register">注册</el-button>
                    </el-form-item>

                  </el-form>
                </div>
      </div>
    </div>
</body>
<script>
    const { reactive, ref, toRefs } = Vue
    const { ElMessage } = ElementPlus
    const App = {
        setup () {
            const state = reactive({
              registerForm: {
                Account: "",
                Password: "",
                UserName: ""
              }
            })
            const registerRules = reactive({
              UserName: [
                {
                  required: true,
                  message: '请输入用户名',
                  trigger: 'blur'
                }
              ],
              Account: [
                {
                  required: true,
                  message: '请输入账号',
                  trigger: 'blur'
                }
              ],
              Password: [
                {
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur'
                }
              ]
            })
            const registerFormRef = ref('')
            const formSize = ref('')
            const register = async () => {
                registerFormRef.value.validate(valid => {
                    if (valid){
                        const params = {
                            UserName: state.registerForm.UserName,
                            Account: state.registerForm.Account,
                            Password: b64_md5(state.registerForm.Password)
                        }
                        request({
                            url: "/register",
                            method: "POST",
                            data: objectToFormData(params)
                        })
                        .then(res => {
                            if(res.status === 200){
                                const { data } = res
                                if (data.code === '2000'){
                                    ElMessage.success("注册成功")
                                    window.location.href = "login.html"
                                }else{
                                    ElMessage.error(data.data.error)
                                }
                            }
                        })
                    }
                })
            }
            return {
              ...toRefs(state),
              registerRules,
              registerFormRef,
              register,
              formSize
            }
          }
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app")
</script>
<style>
    .login-container {
      width: 1200px;
      display: flex;
      justify-content: flex-end;
      margin: 30px auto;
      height: 1000px;
      background: url("../static/img/background.jpeg") no-repeat;
    }
    .form-container {
        width: 30%;
        margin-top: 150px;
        margin-right: 10%;
    }
    .el-form-item {
      margin-bottom: 45px;
    }
    #register-link {
        color: #99ccff;
        text-decoration: underline;
      }
    .login-btn {
        position: absolute;
        width: 35%;
        right: 0;
      }
    .form-header {
      text-align: center;
      margin-left: 50px;
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 20px;
      color: #ffd04b;
    }
</style>
</html>